<template>
  <a-modal
    :title="formTile + '标签'"
    :visible="true"
    width="50%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card>
        <a-row
          type="flex"
          justify="start"
          align="top"
        >
          <a-col :span="24">
            <a-form
              :form="form"
              @submit="handleSubmit"
              :labelCol="formItemLayout.labelCol"
              :wrapperCol="formItemLayout.wrapperCol"
            >
              <a-form-item
                label="标签名称"
                v-if="!showOrder"
              >
                <a-textarea
                  :rows="8"
                  allow-clear
                  placeholder="请输入标签，通过换行区分"
                  v-decorator="['tagDetailName', { rules: [{ required: true, message: '请输入标签，通过换行区分' }] }]"
                ></a-textarea>
              </a-form-item>
              <a-form-item
                label="标签名称"
                v-if="showOrder"
              >
                <a-input
                  allow-clear
                  placeholder="请输入标签名称"
                  :maxLength="40"
                  v-decorator="[
                  `tagDetailName`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入标签名称'
                      }
                    ]
                  }
                ]"
                />
              </a-form-item>
              <a-form-item
                label="顺序"
                :required="true"
                v-if="showOrder"
              >
                <a-input-number
                  allow-clear
                  :min="1"
                  :max="999"
                  placeholder="请输入标签组顺序"
                  v-decorator="[
                  `tagOrder`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        message: '请输入标签组顺序'
                      }
                    ]
                  }
                ]"
                />
              </a-form-item>
             <a-row style="margin-top:10px">
                <a-col
                  :span="8"
                  :offset="4"
                >
                  <div
                    @click="reset"
                    class="reset"
                  >
                    取消
                  </div>
                </a-col>
                <a-col :span="8">
                 
                   <div
                    class="submit"
                   @click="handleSubmit"
                  >
                    提交
                  </div>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
    </div>

  </a-modal>
</template>

<script>
import { tagCreate, tagUpdate } from '@api/label/index'

export default {
  components: {},

  props: {
    label: {
      type: Object,
      default: null
    },
    type: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      loading: true,
      form: this.$form.createForm(this),
      showOrder: false,
      parentId: '',
      id:'',
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xl: { span: 10 },
          xs: { span: 16 },
          sm: { span: 16 }
        }
      }
    }
  },

  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'account' })
  },

  created() {
    const { label, type } = this.$props
    console.log(label);
    if (type == 2) {
      this.formTile = '编辑'
      this.showOrder = true
      this.id = label.id
      this.$nextTick(() => {
        this.form.setFieldsValue({ tagDetailName: label.tagName, tagOrder: label.tagOrder })
      })
    } else {
      this.parentId = label.id
      this.formTile = '新增'
    }
  },
  mounted() {},
  methods: {
    reset() {
      this.form.resetFields()
      this.$emit('closeLabel')
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    async submit(values) {
      var params = values
      params.id = this.parentId ? this.parentId :this.id
      const res = this.showOrder ? await tagUpdate('tag', params) : await tagCreate('tag', params)
     if (res.msg == "success") {
        this.$message.success(this.showTable ? '新建标签成功！' : '修改成功！')
        this.reset()
      } else {
        this.$message.warning(res.msg)
      }
    }
  }
}
</script>

<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 70%;
  padding: 0 15%;
}
.ml-20 {
  margin-left: 20px;
}
.submit {
  margin-left: 8px;
  background: #409eff;
  width: 110px;
  border-radius: 10px;
  height: 40px;
  color: #fff;
  text-align: center;
  line-height: 40px;
}
.reset {
  width: 110px;
  border-radius: 10px;
  height: 40px;
  border: 1px solid #969799;
  text-align: center;
  line-height: 40px;
}
</style>
